// 导入全局状态
import { createStore } from "vuex";

// 第一步调用createStore来·创建一个状态管理
export default createStore({
    // 第八步：vuex 刷新页面后数据会初始化，我们需要配合 localStorage 进行固化
    state: {
        userName: localStorage.getItem('userName') ?
            localStorage.getItem('userName') : "第一次调用，用户初始化状态 vuex-store"
    },
   // 第二步设置全局变量
   // 第三步：同步修改data数据的方法声明
   mutations:{
    // 命名注意M——后面的login是方法的调用名
       M_LOGIN(state,userName){
           localStorage.setItem("userName",userName)
           state.userName=userName;
       },
       M_LOGOUT(state){
           localStorage.setItem("userName","用户退出登录")
           state.userName="用户退出登录"
       }
   },
   // 第四步，异步修改data数据方法调用
   actions:{
       login({commit},userName){
           commit("M_LOGIN",userName)
       },
       logout({commit}){
           commit("M_LOGOUT")
       }
   },
   // 模块化的操作使用
   modules: {},
   // 类似于我们 computed 计算属性
   getters: {
       userNameLength(state) {
           return state.length;
       }
   }
})